<template>
  <div class="fullpage">
    <div class="box box-16b9">
      <video class="video-max" ref="video" id="video"></video>
      <canvas class="video-max" ref="canvas" id="canvas"></canvas>
    </div>

    <div @click="stop()">stop</div>

    扫码后根据扫码内容调转不同的方向
    <div @click="linkto('/register')">模拟扫码后触发注册</div>
    <div @click="linkto('/login')">模拟扫码后触发登录</div>
    <div @click="linkto('/editPlayer')">角色创建</div>
    <div @click="linkto('/PlayerBackpack')">玩家背包</div>
  </div>
</template>
<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';
import jsQR from 'jsqr';

export default {
  name: 'smpage',
  mixins: [], //混入
  components: {}, //组件
  props: {}, //集成属性
  data() {
    return {
      video: null,
      canvas: null,
      time: null,
      img2: '',
      mediaStream: null,
    };
  },
  computed: {
    ...mapState([]),
  },
  methods: {
    ...mapMutations([]),
    linkto: function(path) {
      this.$router.push(path);
    },
    open: function() {
      navigator.mediaDevices
        .getUserMedia({
          audio: false,
          video: true,
        })
        .then((stream) => {
          this.mediaStream = stream;
          this.videoPlay(stream);
        })
        .catch((err) => {
          console.error(err);
        })
        .finally((_) => {});
    },
    stop: function() {
      this.mediaStream.getTracks().forEach((track) => {
        track.stop();
      });
      clearInterval(this.time);
    },
    videoPlay: function(stream) {
      let video = this.$refs['video'];
      video.setAttribute('playsinline', true);
      video.muted = true;
      video.srcObject = stream;
      video.play();

      this.video = video;

      const canvas = this.$refs['canvas'];

      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, 300, 200);
      ctx.drawImage(video, 0, 0, 300, 200);
      this.time = setInterval(() => {
        ctx.clearRect(0, 0, 300, 200);
        ctx.drawImage(video, 0, 0, 300, 200);
        let img = ctx.getImageData(0, 0, 300, 200).data;
        this.img2 = img;
        let code = jsQR(img, 300, 200, {
          // inversionAttempts: 'dontInvert',
        });
        if (code) {
          console.log(code);
          //确认可以得到数据，在code.data中
        } else {
          console.log('ing');
        }
      }, 200);
      // video.addEventListener('loadedmetadata', function() {
      //   console.log(
      //     '%c [ loadedmetadata ]-60',
      //     'font-size:13px; background:pink; color:#bf2c9f;'
      //   );
      // });
    },
    tick: function() {
      requestAnimationFrame(this.tick); //回调自己
    },
    预订跳转: function() {
      //  <div @click="linkto('/register')">模拟扫码后触发注册</div>
      // <div @click="linkto('/login')">模拟扫码后触发登录</div>
      // <div @click="linkto('/editPlayer')">角色创建</div>
      // <div @click="linkto('/PlayerBackpack')">玩家背包</div>
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    this.open();
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy() {
    this.time = null;
  },
  destroyed: function() {},
};
</script>
<style lang="less" scoped>
.fullpage {
  max-width: 750px;
  height: 100vh;
  margin: 0 auto;
  background: rgba(255, 0, 0, 0.2);
}
#video {
  width: 300px;
  height: 200px;
  background-color: rgba(255, 0, 0, 0.2);
}
#canvas {
  width: 300px;
  height: 200px;
  background-color: rgba(0, 255, 0, 0.2);
}

.box {
  position: relative;

  .video-max {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>
